<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false && !isIframed"
  >
    <mat-toolbar class="nav-toolbar">Menu</mat-toolbar>
    <mat-nav-list>
      <a
        mat-list-item
        routerLink="/"
        [queryParams]="getNamespaceParams(currentNamespace)"
        [routerLinkActive]="['active']"
        [routerLinkActiveOptions]="{ exact: true }"
        [attr.data-cy-sidenav-menu-item]="'Home'"
        >Home</a
      >
      <a
        mat-list-item
        *ngFor="let link of menuLinks"
        [routerLink]="getUrlPath(link.link, currentNamespace)"
        [fragment]="getUrlFragment(link.link)"
        [queryParams]="getNamespaceParams(currentNamespace)"
        [class.active]="isLinkActive(link.link)"
        [attr.data-cy-sidenav-menu-item]="link.text"
      >
        {{ link.text }}
      </a>
    </mat-nav-list>

    <mat-toolbar class="footer">
      <mat-toolbar-row class="footer-text">
        <span class="buildVersion">
          {{ buildVersionWithLabel }}
        </span>
        <span class="buildId">
          {{ buildIdWithLabel }}
        </span>
      </mat-toolbar-row>
    </mat-toolbar>
  </mat-sidenav>
  <mat-sidenav-content class="main-page-content">
    <mat-toolbar class="menu-toolbar" color="primary" *ngIf="!isIframed">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async"
      >
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <app-namespace-selector></app-namespace-selector>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>
